import { VNodeChild } from "vue";
import { Recordable } from "/#/global";

interface PaginationRenderProps {
  page: number;
  type: "page" | "prev" | "next";
  originalElement: any;
}

export declare class PaginationConfig {
  position?: "top" | "bottom" | "both";
}

export interface PaginationProps {
  /**
   * 当前页数，支持 v-model 双向绑定
   * 默认1
   */
  currentPage?: number;
  /**
   * 每页显示条目数的初始值
   */
  defaultCurrentPage?: number;
  /**
   * 总页数 total 和 page-count 设置任意一个就可以达到显示页码的功能；
   * 如果要支持 page-sizes 的更改，
   * 则需要使用 total 属性
   */
  pageCount?: number;
  /***
   * 设置最大页码按钮数。
   * 页码按钮的数量，当总页数超过该值时会折叠
   * 5 ≤ x ≤ 21 的奇数
   */
  pagerCount?: number;
  /**
   * 组件布局，子组件名用逗号分隔
   * sizes / prev / pager / next / jumper / -> / total / slot
   *'prev, pager, next, jumper, ->, total'
   *
   */
  layout?: string;
  /**
   * 	[10, 20, 30, 40, 50, 100]
   * 每页显示条目个数，支持 v-model 双向绑定
   */
  pageSizes?: number[] | ((...args: any[]) => number[]);
  /**
   * 每页显示个数选择器的下拉框类名
   */
  popperClass?: string;
  /**
   * 替代图标显示的上一页文字
   */
  prevText?: string;
  /**
   * 替代图标显示的下一页文字
   */
  nextText?: string;
  /**
   * 	是否使用小型分页样式
   */
  small?: boolean;
  /**
   * 是否为分页按钮添加背景色
   */
  background?: boolean;
  /**
   * 是否禁用分页
   */
  disabled?: boolean;
  /**
   * 总条目数
   * total number of data items
   * @default 0
   * @type number
   */
  total?: number;

  /**
   * 每页显示条目个数，支持 v-model 双向绑定
   * 默认10
   */
  pageSize?: number;
  /**
   * 每页显示条目数的初始值
   */
  defaultPageSize?: number;

  /**
   * Whether to hide pager on single page
   * @default false
   * @type boolean
   * 只有一页时是否隐藏
   */
  hideOnSinglePage?: boolean;

  /**
   * to display the total number and range
   * @type Function
   */
  showTotal?: (total: number, range: [number, number]) => any;

  /**
   * to customize item innerHTML
   * @type Function
   */
  itemRender?: (props: PaginationRenderProps) => VNodeChild | JSX.Element;
  /**
   * 自定义样式
   */
  style?: Recordable;
  /**
   * 自定义class
   */
  customClass?: string | string[];
}
